import 'package:concert_ticket_client/app/api/auth_api.dart';
import 'package:concert_ticket_client/app/model/bo/login_model/LoginModel.dart';
import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:concert_ticket_client/app/routes/app_pages.dart';
import '../controllers/auth_controller.dart';

class AuthView extends GetView<AuthController> {
  const AuthView({super.key});
  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;
    double screenHeight = MediaQuery.of(context).size.height;

    Widget loginForm() {
      return Container(
        child: Form(
          child: Column(
            children: [
              TextFormField(
                controller: controller.loginControllerMap['account'],
                decoration: InputDecoration(
                  labelText: '账号',
                  hintText: '请输入账号',
                  prefixIcon: Icon(Icons.account_circle),
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入账号';
                  }
                  return null;
                },
              ),
              TextFormField(
                controller: controller.loginControllerMap['password'],
                obscureText: controller.showLoginPassword.value,
                decoration: InputDecoration(
                  labelText: '密码',
                  hintText: '请输入密码',
                  prefixIcon: Icon(Icons.password_outlined),
                  suffix: IconButton(
                    icon: Icon(Icons.remove_red_eye_outlined),
                    onPressed: () {
                      controller.showLoginPassword.value = !controller.showLoginPassword.value;
                    }
                  )
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入账号';
                  }
                  return null;
                },
              ),
              Container(
                width: double.infinity,
                height: 40,
                child: Wrap(
                  alignment: WrapAlignment.spaceBetween,
                  children: [
                    Container(
                      width: 100,
                      height: 40,
                      decoration: BoxDecoration(
                      ),
                      child: Row(
                        children: [
                          Checkbox(
                              value: false,
                              onChanged: (value){

                              },

                          ),
                          Text('记住我'),
                        ],
                      ),
                    ),
                    Container(
                      width: 100,
                      height: 40,
                      child: Text('忘记密码？', textAlign: TextAlign.right,),
                      alignment: Alignment.centerRight,
                      decoration: BoxDecoration(
                      ),
                    )
                  ],
                ),
                decoration: BoxDecoration(
                ),
              ),
              Container(
                width: double.infinity,
                child: ElevatedButton(
                  onPressed: () {
                    loginApi(loginModel: LoginModel(
                        account: controller.loginControllerMap['account']!.value.text,
                        password: controller.loginControllerMap['password']!.value.text,
                    )).then((result) {
                        if(result) {
                          Get.offAllNamed(Routes.HOME);
                        } else {
                          Get.snackbar(
                            '登录失败',
                            '请检查账号和密码是否正确',
                            titleText: Text('登录失败', style: TextStyle(color: Colors.red),),
                            messageText: Text('请检查账号和密码是否正确'),
                            duration: Duration(seconds: 3)
                          );
                        }
                    });
                  },
                  child: Text(
                    '登录',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16,
                      letterSpacing: 10
                    ),
                  ),
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(Colors.black),
                    shape: MaterialStateProperty.all(
                      RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(4)
                      )
                    )
                  ),
                ),
              )
            ],
          ),
        ),
      );
    }

    Widget registerForm() {
      return Container(
        child:  Form(
          child: Column(
            children: [
              Container(
                child: UnconstrainedBox(
                  child: ClipOval(
                    child: Container(
                      width: 60,
                      height: 60,
                      child: Image.asset('lib/app/assets/g1.jpg'),
                    ),
                  ),
                ),
              ),
              SizedBox(height: 20),
              TextFormField(
                controller: controller.registerControllerMap['phone'],
                decoration: InputDecoration(
                  labelText: '昵称',
                  hintText: '请输入昵称',
                  prefixIcon: Icon(Icons.person),
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入账号';
                  }
                  return null;
                },
              ),
              TextFormField(
                controller: controller.registerControllerMap['email'],
                decoration: InputDecoration(
                  labelText: '邮箱',
                  hintText: '请输入邮箱',
                  prefixIcon: Icon(Icons.email),
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入邮箱';
                  }
                  return null;
                },
              ),

              TextFormField(
                controller: controller.loginControllerMap['password'],
                obscureText: controller.showRegisterPassword.value,
                decoration: InputDecoration(
                    labelText: '密码',
                    hintText: '请输入密码',
                    prefixIcon: Icon(Icons.password_outlined),
                    suffix: IconButton(
                      icon: Icon(Icons.remove_red_eye_outlined),
                        onPressed: () {
                          controller.showLoginPassword.value = !controller.showLoginPassword.value;
                        },
                    )

                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入密码';
                  }
                  return null;
                },
              ),
              Container(
                width: double.infinity,
                child: Row(
                  children: [
                    Container(
                      width: 170,
                      child: TextFormField(
                        controller: controller.registerControllerMap['validateCode'],
                        decoration: InputDecoration(
                          labelText: '验证码',
                          hintText: '请输入邮箱',
                          prefixIcon: Icon(Icons.send),
                        ),
                        validator: (value) {
                          if (value == null || value.isEmpty) {
                            return '请输入邮箱';
                          }
                          return null;
                        },
                      ),
                    ),
                    Container(
                      alignment: Alignment.center,
                      child: InkWell(
                        child: Text('发送验证码', style: TextStyle(color: Colors.blue, fontSize: 12),),
                        onTap: () {
                          print('发送验证码');
                        },
                      ),
                      height: 56.5,
                      width: 85,
                      decoration: BoxDecoration(
                        //  底部加一条黑色装饰线
                        border: Border(
                          bottom: BorderSide(
                            color: Colors.black,
                            width: 0.5
                          )
                        )
                      ),
                    )

                  ],
                ),
              ),

              SizedBox(height: 50),
              Container(
                width: double.infinity,
                child: ElevatedButton(
                  onPressed: () {

                  },
                  child: Text(
                    '注册',
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 16,
                        letterSpacing: 10
                    ),
                  ),
                  style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.black),
                      shape: MaterialStateProperty.all(
                          RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(4)
                          )
                      )
                  ),
                ),
              ),
            ],
          ),
        ),
      );
    }

    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [
              Color.fromRGBO(220, 229, 244, 1),
              Color.fromRGBO(220, 229, 244, 1),
            ],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),
        ),

        alignment: Alignment.center,
        child: Obx(
            () {
              return Container(
                width: screenWidth * 0.8,
                height: controller.isLogin.value ? screenHeight * 0.6 : screenHeight * 0.8,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey.withOpacity(0.5),
                      spreadRadius: 5,
                      blurRadius: 7,
                      offset: Offset(0, 3), // changes position of shadow
                    ),
                  ],
                ),
                child: Column(
                    children: [
                      Container(
                        height: screenHeight * 0.1,
                        decoration: BoxDecoration(
                          color: Colors.black,
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(8),
                            topRight: Radius.circular(8),
                          ),
                        ),
                        child: Wrap(
                          direction: Axis.horizontal,
                          children: [
                            ListTile(
                              title: Text('买票去演唱会', textAlign: TextAlign.center,),
                              titleTextStyle: TextStyle(
                                color: Colors.white,
                                fontSize: 16,
                                fontWeight: FontWeight.bold,
                              ),
                              subtitle: Text('顺便转转~', textAlign: TextAlign.center,),
                              subtitleTextStyle: TextStyle(
                                color: Colors.white70,
                                fontSize: 12,
                                fontWeight: FontWeight.normal,
                              ),
                            )
                          ],
                        ),
                      ),
                      Container(
                          padding: EdgeInsets.only(left: 16, right: 16, top: 16),
                          child: Column(
                              children: [
                                Container(
                                  height: controller.isLogin.value ? screenHeight * 0.3 : screenHeight * 0.58,
                                  decoration: BoxDecoration(
                                    color: Colors.white70,
                                    borderRadius: BorderRadius.only(
                                      topLeft: Radius.circular(8),
                                      topRight: Radius.circular(8),
                                    ),
                                  ),
                                  child: Obx(() => controller.isLogin.value ? loginForm() : registerForm()),
                                ),
                                Divider(),
                                Container(
                                  decoration: BoxDecoration(
                                    color: Colors.white70,
                                    borderRadius: BorderRadius.only(
                                      topLeft: Radius.circular(8),
                                      topRight: Radius.circular(8),
                                    ),
                                  ),
                                  child: Wrap(
                                    direction: Axis.horizontal,
                                    alignment: WrapAlignment.center,
                                    children: [
                                      Obx(() {
                                        return !controller.isLogin.value ? Container() : Column(
                                          children: [
                                            Container(
                                              child: Text("其他社交账号登录"),
                                            ),
                                            Container(
                                              child: Wrap(
                                                direction: Axis.horizontal,
                                                children: [
                                                  IconButton(
                                                    icon: Icon(Icons.facebook),
                                                    onPressed: () {},
                                                  ),
                                                  IconButton(
                                                    icon: Icon(Icons.wechat),
                                                    onPressed: () {},
                                                  ),
                                                  IconButton(
                                                    icon: Icon(Icons.phone),
                                                    onPressed: () {},
                                                  ),
                                                ],
                                              ),
                                            ),
                                          ],
                                        );
                                      }),
                                      Container(
                                        height: 30,
                                        child: Wrap(
                                          direction: Axis.horizontal,
                                          children: [
                                            Obx(() => Text(controller.isLogin.value ? '还没有账号？' : '已有账号, ')),
                                            InkWell(
                                              child: Obx(() => Text(
                                                  controller.isLogin.value ? '立即注册' : '去登录',
                                                  style: TextStyle(fontWeight: FontWeight.bold)
                                              )),
                                              onTap: () {
                                                print(controller.isLogin.value ?'去注册' : '去登录');
                                                if (controller.isLogin.value) {
                                                  controller.switchToRegister();
                                                } else {
                                                  controller.switchToLogin();
                                                }

                                              },
                                            ),
                                          ],
                                        ),
                                        decoration: BoxDecoration(),
                                        alignment: Alignment.center,
                                      ),
                                    ],
                                  ),
                                ),
                              ]
                          )
                      )
                    ]
                ),
              );
            }
        ),
      ),
    );
  }
}
